<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台管理界面</title>
    <script src="js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>


<style>
    html, body, #app {
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .el-container {
        height: 100%;
    }

    .el-tabs__content {
        height: calc(100% - 68px);
    }

    .el-tab-pane {
        height: 100%;
    }

    #title{
        float: left;
        width: 200px;
        height: 60px;
        line-height: 60px;
        font-size: 20px;
        font-weight: bold;
        color: #1C7D77;
    }

    #index{
        text-decoration-line:none ;
        color: white;
        position: absolute;
        right: 10px;
        top: 15px;
        font-size: 20px;
    }

    #header-main{
        background-color: #304156;
        border-top: 1px solid #eee;
    }




</style>

<body>
<div id="app">
    <el-container >
        <el-header id="header-main" >
            <div id="title">百货商城后台管理系统</div>
            <div style="float: right"><a href="index.html" id="index">前台首页</a></div>
        </el-header>
        <el-container>
            <el-aside style="width: 220px;background-color: #304156" >
                <el-menu  @select="selectMenu"
                          default-active="2"
                          class="el-menu-vertical-demo"
                          background-color="#304156"
                          text-color="#fff">
                    <el-menu-item v-for="menu in menus" :index="menu.name">
                        <i class="el-icon-location"></i>
                        <span>{{menu.name}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main style="padding: 0px">
                <el-tabs v-model="currentTab" type="card" style="height: 100%" editable  @edit="handleTabsEdit">
                    <el-tab-pane v-for=" tab in tabs" :label="tab.name"
                                 :key="tab.name" :name="tab.name">
                        <iframe :src="tab.url" height="100%" width="100%"></iframe>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    var v = new Vue({
        el : "#app",
        data : {
            menus : [
                {name : "登录界面",url : "login.html"},
                {name : "222",url : ""},
                {name : "333",url : ""},
                {name : "444",url : ""},
                {name : "555",url : ""},
            ],
            tabs : [ ],
            currentTab : ""
        },
        methods : {
            selectMenu(name){
                //查找是否已经打开该页
                let tab = this.tabs.find(tab=>{
                    if(tab.name == name){
                        return tab;
                    }
                });
                // 如果tab不为 undefined ，表示已经打开tab
                if(tab){
                    //直接选中该标签
                    this.currentTab = name;
                    return;
                }
                // 在菜单数组中查找菜单对象
                this.menus.forEach(menu=>{
                    if(menu.name == name){
                        this.tabs.push({
                            name :name,
                            url : menu.url
                        });
                        //设置当前页
                        this.currentTab = name;
                    }
                })
            },
            handleTabsEdit(targetName,action) {
                    if (action === 'remove') {
                    if (this.currentTab === targetName) {
                        this.tabs.forEach((tab, index) => {
                            console.info(tab);
                            console.info(index);
                            if (tab.name === targetName) {
                                let nextTab = this.tabs[index + 1] || this.tabs[index - 1];
                                if (nextTab) {
                                    this.currentTab = nextTab.name;
                                }
                            }
                        });
                    }
                    //删除标签
                    //filter() 方法创建一个  新的数组 ，新数组中的元素是通过检查指定数组中符合条件的所有元素
                    this.tabs = this.tabs.filter(tab => tab.name !== targetName);
                }
            }
        }
    })
</script>
</html>

